<!DOCTYPE html>
<!-- 引入thymeleaf模板 -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>SF-System | Register</title>
  <!-- Tell the browser to be responsive to screen width（告诉浏览器响应屏幕宽度） -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--  浏览器title左边的小图标  -->
  <link rel="shortcut icon" th:href="@{/admin/dist/img/SFLogo.jpg}"/>
  <!-- Font Awesome（字体的css） -->
  <link rel="stylesheet" th:href="@{/admin/dist/css/font-awesome.min.css}">
  <!-- Ionicons -->
  <link rel="stylesheet" th:href="@{/admin/dist/css/ionicons.min.css}">
  <!-- Theme style -->
  <link rel="stylesheet" th:href="@{/admin/dist/css/adminlte.min.css}">
  <style>
    canvas {
      display: block;
      vertical-align: bottom;
    }
    #particles {
      background-color: #F7FAFC;
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
  </style>
</head>
<body class="hold-transition login-page">
<script th:src="@{/admin/plugins/layui/layui.js}"></script>
<script>
  function back() {
    window.location.href = "/admin/login";
  }
</script>
<div id="particles">
</div>
<div class="login-box">
  <div class="login-logo" style="color: #007bff;">
    <h1>注  册</h1>
  </div>
  <!-- /.login-logo -->
  <div class="card">
    <div class="card-body login-card-body">
      <p class="login-box-msg">让中国的大飞机翱翔蓝天</p>
      <form th:action="@{/admin/register/save}" method="post">
        <!-- session不为空时，用这个class样式 -->
        <div th:if="${not #strings.isEmpty(session.errorMsg)}" class="form-group">
          <!-- session不为空，显示文本 -->
          <div class="alert alert-danger" th:text="${session.errorMsg}"></div>
        </div>
        <!-- 输入用户名 -->
        <div class="form-group has-feedback">
          <label class="layui-form-label">输入工号</label>
          <input type="text" id="userId" name="empWorkerId" class="form-control" placeholder="请输入工号" required="true">
        </div>
        <!-- 输入姓名 -->
        <div class="form-group has-feedback">
          <label class="layui-form-label">输入姓名</label>
          <input type="text" id="userName" name="empName" class="form-control" placeholder="请输入姓名" required="true">
        </div>
        <!-- 输入密码  -->
        <div class="form-group has-feedback">
          <label class="layui-form-label">输入密码</label>
          <input type="password" id="password" name="password" class="form-control" placeholder="请输入密码" required="true">
        </div>
        <!-- 确认密码  -->
        <div class="form-group has-feedback">
          <label class="layui-form-label">确认密码</label>
          <input type="password" id="password2" name="password2" class="form-control" placeholder="请再次输入密码" required="true">
        </div>
        <!-- 部门和分组情况 -->
        <div class="form-group has-feedback">
          <label class="layui-form-label">请选择部门和分组</label><br>
          <select name="departmentAndGroup" class="form-control">
            <option value="不能选这个">请选择部门和分组</option>
            <optgroup label="飞行管理部">
              <option value="飞行管理部.分布班组">分布班组</option>
              <option value="飞行管理部.机关班组">机关班组</option>
              <option value="飞行管理部.食堂班组">食堂班组</option>
            </optgroup>
            <optgroup label="信息技术管理部">
              <option value="信息技术管理部.软件班组">软件班组</option>
              <option value="信息技术管理部.运维班组">运维班组</option>
              <option value="信息技术管理部.行政班组">行政班组</option>
            </optgroup>
            <optgroup label="维修工程部">
              <option value="维修工程部.维霄班组">维霄班组</option>
              <option value="维修工程部.驱鸟班组">驱鸟班组</option>
              <option value="维修工程部.荷花班组">荷花班组</option>
            </optgroup>
            <optgroup label="安全质量监察部">
              <option value="安全质量监察部.云翼班组">云翼班组</option>
              <option value="安全质量监察部.风景线班组">风景线班组</option>
              <option value="安全质量监察部.亮剑班组">亮剑班组</option>
            </optgroup>
            <optgroup label="运行标准部">
              <option value="运行标准部.黑鹰特战班组">黑鹰特战班组</option>
              <option value="运行标准部.楷杰班组">楷杰班组</option>
              <option value="运行标准部.欣悦班组">欣悦班组</option>
            </optgroup>
            <optgroup label="运行控制部">
              <option value="运行控制部.指南针班组">指南针班组</option>
              <option value="运行控制部.小百灵班组">小百灵班组</option>
              <option value="运行控制部.龙耀班组">龙耀班组</option>
            </optgroup>
            <optgroup label="综合部">
              <option value="综合部.飞燕班组">飞燕班组</option>
              <option value="综合部.磐石班组">磐石班组</option>
              <option value="综合部.风盾班组">风盾班组</option>
            </optgroup>
          </select>
        </div>
        <!-- 验证码 -->
        <div class="row">
          <div class="col-6">
            <input type="text" class="form-control" name="verifyCode" placeholder="请输入验证码" required="true">
          </div>
          <div class="col-6">
            <img alt="单击图片刷新！" class="pointer" th:src="@{/common/kaptcha}"
                 onclick="this.src='/common/kaptcha?d='+new Date()*1">
          </div>
        </div>
        <div class="form-group has-feedback"></div>
        <div class="row">
          <div class="col-4">
            <button onclick="back()" type="button" class="btn btn-primary btn-block btn-flat">返回</button>
          </div>
          <div class="col-4">
          </div>
          <div class="col-4">
            <button type="submit" class="btn btn-primary btn-block btn-flat">确认</button>
          </div>
        </div>
      </form>
    </div>
    <!-- /.login-card-body -->
  </div>
</div>
<!-- /.login-box -->

<!-- jQuery -->
<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/admin/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/admin/dist/js/plugins/particles.js}"></script>
<script th:src="@{/admin/dist/js/plugins/login-bg-particles.js}"></script>
</body>
</html>
